<!--  -->
<template>
  <div class="page_body">
    <div class="register_from_box">
      <div class="register_from_item border_item">
        <div class="border_item_popup_box" style="height: 100%">
          <div class="coach_register_from_upload_img">
            <div class="border_item_title">单位logo</div>
            <div
              class="border_item_popup no_value_item"
              style="width: 4.8rem; height: 0.94rem; line-height: 0.94rem"
            ></div>
          </div>

          <div class="upload_img_box">
            <img
              v-if="userData.avatar == null || userData.avatar == ''"
              class="upload_img_box_icon"
              src="../../assets/image/upload_img_bg03.png"
            />
            <img
              v-if="userData.avatar != null && userData.avatar != ''"
              class="upload_img_box_icon"
              :src="userData.avatar"
            />
            <input
              type="file"
              accept="image/*"
              ref="uploadImg"
              id="upload_img_btn"
              @change="uploadImgBtn($event)"
              :disabled="inputKey"
            />
          </div>
          <img src="../../assets/image/to_icon03.png" class="popup_icon" />
        </div>
      </div>
      <div class="register_from_items border_item">
        <div class="border_item_title">单位名称</div>
        <input
          class="register_from_item_inputx"
          placeholder="请输入单位名称"
          type="text"
          v-model="userData.company_name"
          maxlength="18"
          :disabled="inputKey"
        />
      </div>
      <div class="register_from_items border_item">
        <div class="border_item_title">单位简称</div>
        <input
          class="register_from_item_inputx"
          placeholder="请输入单位简称"
          type="text"
          v-model="userData.company_simple_name"
          maxlength="18"
          :disabled="inputKey"
        />
      </div>
      <div class="register_from_items border_item">
        <div class="border_item_title">拟申请会员类别</div>
        <van-field
          class="register_from_item_inputx"
          placeholder="请选择会员类别"
          :clickable="inputKey"
          v-model="currentMemberType"
          @click="showPicker = true"
          :disabled="inputKey"
          input-align="right"
        />
      </div>
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="getLabels(memberType)"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
      <div class="register_from_items border_item">
        <div class="border_item_title">联系人姓名</div>
        <input
          class="register_from_item_inputx"
          placeholder="请输入联系人姓名"
          type="text"
          v-model="userData.contact_name"
          maxlength="18"
          :disabled="inputKey"
        />
      </div>
      <div class="register_from_items border_item">
        <div class="border_item_title">联系人电话</div>
        <input
          class="register_from_item_inputx"
          placeholder="联系人电话"
          type="Number"
          v-model="userData.contact_phone"
          maxlength="18"
          :disabled="inputKey"
        />
      </div>
      <div class="register_from_items border_item">
        <div class="border_item_title">邮寄地址</div>
        <input
          class="register_from_item_inputx"
          placeholder="请输入邮寄地址"
          type="text"
          v-model="userData.address"
          :disabled="inputKey"
        />
      </div>
      <div class="register_from_items border_item">
        <div class="border_item_title" style="height: 1rem">会员简介</div>

        <!-- <el-input class="register_from_item_inputx" placeholder="请输入会员简介" type="textarea" :rows="4"
          style="height: 1.2rem;" maxlength="200" show-word-limit v-model="userData.detail"
          :disabled="inputKey"></el-input> -->
      </div>
      <div class="register_from_items border_item">
        <van-field
          v-model="userData.detail"
          rows="3"
          autosize
          type="textarea"
          maxlength="200"
          placeholder="请输入会员简介"
          show-word-limit
        />
      </div>

      <!-- 上传申请登记表（ -->
      <div class="register_from_item border_item">
        <div class="border_item_popup_box" style="height: 100%">
          <div class="coach_register_from_upload_img">
            <div class="sd sds" @click="downloadFile">
              <div class="border_item_title_tips sd">上传申请登记表</div>
              (下载登记表)
            </div>
            <div
              class="border_item_popup no_value_item"
              style="width: 1.8rem; height: 0.94rem; line-height: 0.94rem"
            ></div>
          </div>

          <div class="upload_img_box" style="width: 2.5rem; height: 1.62rem">
            <!-- <img v-if="
                userData.register_info_image == null ||
                userData.register_info_image == ''
              " class="upload_img_box_icon" src="../../assets/image/toux.png" />
            <img v-if="
                userData.register_info_image != null &&
                userData.register_info_image != ''
              " class="upload_img_box_icon" :src="userData.register_info_image" /> -->
            <p
              v-if="
                userData.register_info_image == null ||
                userData.register_info_image == ''
              "
              style="
                word-wrap: break-word;
                width: 2rem;
                color: #105beb;
                font-size: 0.23rem;
                text-align: center;
                line-height: 1.62rem;
              "
            >
              上传
            </p>
            <p
              v-else
              style="
                word-wrap: break-word;
                width: 2rem;
                color: #105beb;
                font-size: 0.23rem;
                line-height: 1.62rem;
              "
            >
              {{ pdfName }}
            </p>
            <input
              type="file"
              accept=".pdf"
              ref="uploadImg"
              id="upload_pdf_btn"
              @change="uploadIdengji($event)"
              :disabled="inputKey"
            />
          </div>
          <!-- <img src="../../assets/image/to_icon03.png" class="popup_icon" /> -->
        </div>
      </div>
      <!-- 上传营业执照 -->
      <div class="register_from_item border_item">
        <div class="border_item_popup_box" style="height: 100%">
          <div class="coach_register_from_upload_img">
            <div class="coach_register_from_upload_img">
              <div class="border_item_title">上传营业执照</div>
              <div
                class="border_item_popup no_value_item"
                style="width: 4.8rem; height: 0.94rem; line-height: 0.94rem"
              ></div>
            </div>
          </div>

          <div class="upload_img_box">
            <img
              v-if="
                userData.business_license_image == null ||
                userData.business_license_image == ''
              "
              class="upload_img_box_icon"
              src="../../assets/image/toux.png"
            />
            <img
              v-if="
                userData.business_license_image != null &&
                userData.business_license_image != ''
              "
              class="upload_img_box_icon"
              :src="userData.business_license_image"
            />
            <input
              type="file"
              accept="image/*"
              ref="uploadImg"
              id="upload_img_btn"
              @change="uploadIzhizhao($event)"
              :disabled="inputKey"
            />
          </div>
          <img src="../../assets/image/to_icon03.png" class="popup_icon" />
        </div>
      </div>
      <!-- 付费凭证 -->
      <div class="register_from_item border_item" v-show="this.radio == '2'">
        <div class="border_item_popup_box" style="height: 100%">
          <div class="coach_register_from_upload_img">
            <div class="coach_register_from_upload_img">
              <!-- <div class="border_item_title">上传付费凭证</div> -->
              <div class="sd sds" @click="downloadBank">
                <div class="border_item_title_tips sd">上传付费凭证</div>
                (查看银行账号信息)
              </div>
              <div
                class="border_item_popup no_value_item"
                style="width: 4.8rem; height: 0.94rem; line-height: 0.94rem"
              ></div>
            </div>
          </div>

          <div class="upload_img_box">
            <img
              v-if="userData.pay_image == null || userData.pay_image == ''"
              class="upload_img_box_icon"
              src="../../assets/image/toux.png"
            />
            <img
              v-if="userData.pay_image != null && userData.pay_image != ''"
              class="upload_img_box_icon"
              :src="userData.pay_image"
            />
            <input
              type="file"
              accept="image/*"
              ref="uploadImg"
              id="upload_img_btn"
              @change="uploadIfufei($event)"
              :disabled="inputKey"
            />
          </div>
          <img src="../../assets/image/to_icon03.png" class="popup_icon" />
        </div>
      </div>

      <van-radio-group v-model="radio">
        <van-radio name="2">上传付款凭证（银行付费账单截屏)</van-radio>
        <van-radio name="1">免收会费单位（无需上传付款凭证)</van-radio>
      </van-radio-group>
    </div>
    <p class="pios" v-if="this.userData.audit_status == 3">
      <span>审核意见：</span>
      {{ this.userData.audit_opinion }}
    </p>
    <div
      class="sign_botton"
      @click="toback('0')"
      v-if="this.userData.audit_status == 0"
    >
      提交
    </div>
    <!--  -->
    <div class="sign_botton" v-if="this.userData.audit_status == 1">审核中</div>
    <div
      class="sign_bottonsd"
      @click="dianzis"
      v-if="this.userData.audit_status == 2"
    >
      查看电子证书
    </div>
    <div class="sign_botton" v-if="this.userData.audit_status == 2">
      审核通过
    </div>
    <div
      class="sign_botton"
      @click="tobacktwo('3')"
      v-if="this.userData.audit_status == 3"
    >
      审核不通过（重新提交）
    </div>
    <van-dialog
      zIndex="100"
      v-model="dialogShow"
      title="注意事项"
      width="6rem"
      :showConfirmButton="false"
    >
      <!-- @isBottom="isBottomFn" -->
      <p class="psd">
        感谢贵单位注册成为上海市篮球协会团体会员的一员，注册审核通过后，您可以在小程序内查看您的电子证书。
      </p>
      <div class="member_constitution_bottom">
        <div class="member_constitution_btn_b" @click="agreeBtn()">
          <!-- [
            isBottom
              ? 'member_constitution_btn_b'
              : 'member_constitution_btn_w',
          ] -->
          确认
        </div>
      </div>
    </van-dialog>
    <van-dialog
      zIndex="100"
      v-model="dialogShowsd"
      title="提示"
      width="6rem"
      :showConfirmButton="false"
    >
      <!-- @isBottom="isBottomFn" -->
      <p class="psdsf">等待审核通过</p>
      <p class="psd">通过后等待团体会员电子证书及信息公示</p>
      <div class="member_constitution_bottom">
        <div class="member_constitution_btn_b" @click="agreeBtnas()">
          <!-- [
            isBottom
              ? 'member_constitution_btn_b'
              : 'member_constitution_btn_w',
          ] -->
          同意
        </div>
      </div>
    </van-dialog>
    <van-dialog
      zIndex="100"
      v-model="dialogShowsdsd"
      title="提示"
      width="6rem"
      :showConfirmButton="false"
    >
      <p class="psd">
        苹果手机请使用默认浏览器打开此文档进行下载，或复制文档链接自行下载。
      </p>
      <div class="member_constitution_bottom">
        <div class="member_constitution_btn_b" @click="agreeBtnasssd()">
          <!-- [
            isBottom
              ? 'member_constitution_btn_b'
              : 'member_constitution_btn_w',
          ] -->
          复制链接并下载
        </div>
      </div>
    </van-dialog>
    <van-dialog
      zIndex="100"
      v-model="dialogShowBank"
      title="银行账号信息"
      width="6rem"
    >
      <p class="psd">上海市篮球协会</p>
      <p class="psd">银行账号: 31001537100056000566</p>
      <p class="psd">开户银行:建设银行上海威海路支行</p>
      <p class="psd">普通团体会员为2000元/年，理事会团体为10000元/年</p>
      <div class="member_constitution_bottom">
        <!-- <div class="member_constitution_btn_b" @click="agreeBtnasssd()">
          确定
        </div> -->
      </div>
    </van-dialog>
    <van-dialog
      zIndex="100"
      v-model="dianzi"
      title="提示"
      width="6rem"
      :showConfirmButton="false"
      :closeOnClickOverlay="true"
    >
      <img class="sisd" :src="this.userData.certificate" alt="" />
    </van-dialog>
  </div>
</template>

<script>
import { MessageBox, Indicator, Toast } from "mint-ui";
import { RadioGroup, Radio, Dialog, Field } from "vant";
export default {
  components: {
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Dialog.name]: Dialog,
    [Field.name]: Field,
  },
  name: "",
  data() {
    return {
      userData: {
        avatar: "", //头像
        company_name: "", //单位名称
        company_simple_name: "", //单位简称
        member_type: "", //拟申请会员类别
        contact_name: "", //联系人姓名
        contact_phone: "", //联系人电话
        address: "", //地址
        detail: "",
        register_info_image: "", //登记表
        business_license_image: "", //营业执照
        pay_image: "", //上传付费凭证
      },
      radio: 1,
      uploadUrl: "", // 提交用图片路径Q
      inputKey: false, // 输入控制
      record: {},
      download_url: "",
      showds: false,
      dialogShow: false, // 弹窗显示
      dialogShowsd: false, // 弹窗显示
      dialogShowsdsd: false, // 银行账户信息
      pdfName: "", // 上传文件名
      dialogShowBank: false,
      dianzi: false,
      id: "", //团体会员记录ID
      showPicker: false,
      currentMemberType: "",
      memberType: [
        {
          label: "会员单位",
          value: 1,
        },
        {
          label: "理事单位",
          value: 2,
        },
      ],
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.tuantilist();
    console.log(this.inputKey, "dlsdlsdl", this.userData);
  },
  methods: {
    tuantilist() {
      let that = this;
      let url = "/mobile/getAssociationVipInfo";
      let data = {
        id: that.id,
      };
      Indicator.open();
      this.axios
        .post(url, data)
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            this.userData = response.record;
            let fileName = response.record.register_info_image.split("/");
            this.pdfName = fileName.pop();
            this.download_url = response.download_url;
            this.radio = response.record.company_type;
            if (
              this.userData.audit_status == 2 ||
              this.userData.audit_status == 1
            ) {
              this.inputKey = true;
            }
            this.currentMemberType = this.getLabelByValue(
              this.memberType,
              this.userData.member_type
            );
            console.log("currentMemberType:" + this.currentMemberType);
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    toback() {
      if (
        this.userData.avatar == "" ||
        this.userData.company_name == "" ||
        this.userData.company_simple_name == "" ||
        this.userData.member_type == "" ||
        this.userData.contact_name == "" ||
        this.userData.contact_phone == "" ||
        this.userData.address == "" ||
        this.userData.detail == "" ||
        this.userData.register_info_image == "" ||
        this.userData.business_license_image == ""
      ) {
        Toast({
          message: "请先完善信息",
        });
        return false;
      }

      let url = "mobile/createAssociationVip";
      let data = {
        id: this.userData.id,
        avatar: this.userData.avatar,
        company_name: this.userData.company_name,
        company_simple_name: this.userData.company_simple_name,
        member_type: this.userData.member_type,
        contact_name: this.userData.contact_name,
        contact_phone: this.userData.contact_phone,
        address: this.userData.address,
        detail: this.userData.detail,
        register_info_image: this.userData.register_info_image,
        business_license_image: this.userData.business_license_image,
        pay_image: this.userData.pay_image,
        company_type: this.radio,
      };
      Indicator.open();
      this.axios
        .post(url, data)
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            console.log(response);
            this.dialogShow = true;
            this.toOldTeamMemberList();
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    tobacktwo() {
      let url = "mobile/createAssociationVip";
      let data = {
        id: this.userData.id,
        avatar: this.userData.avatar,
        company_name: this.userData.company_name,
        company_simple_name: this.userData.company_simple_name,
        member_type: this.userData.member_type,
        contact_name: this.userData.contact_name,
        contact_phone: this.userData.contact_phone,
        address: this.userData.address,
        detail: this.userData.detail,
        register_info_image: this.userData.register_info_image,
        business_license_image: this.userData.business_license_image,
        pay_image: this.userData.pay_image,
        company_type: this.radio,
      };
      Indicator.open();
      this.axios
        .post(url, data)
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            this.dialogShow = true;
            // console.log(response);
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    agreeBtn() {
      this.dialogShow = false;
      this.dialogShowsd = true;
    },
    agreeBtnas() {
      this.tuantilist();
      this.dialogShowsd = false;
    },
    agreeBtnasssd() {
      const url = this.download_url;
      const input = document.createElement("input");
      input.setAttribute("value", url);
      document.body.appendChild(input);
      input.select();
      if (document.execCommand("copy")) {
        console.log("复制成功");
      }
      document.body.removeChild(input);
      window.location.href = this.download_url;
      this.dialogShowsdsd = false;
    },
    downloadFile() {
      this.dialogShowsdsd = true;
    },
    downloadBank() {
      this.dialogShowBank = true;
    },
    dianzis() {
      this.dianzi = true;
    },
    // 上传头像图片
    uploadImgBtn: function (e) {
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 3) {
        Toast({
          message: "照片大小超过3MB",
          duration: 3000,
        });
        that.$refs.uploadImg.value = "";
      } else {
        if (file != undefined && file != null) {
          let reader = new FileReader();
          reader.onload = (res) => {
            let image = new Image();
            // image.onload = function () {
            //   let width = image.width;
            //   let height = image.height;
            //   let cl = height / width;

            // };
            that.uploadImgFn(res.target.result);
            image.src = res.target.result;
          };
          reader.readAsDataURL(file);
        }
      }
    },
    // 上传图片到服务器
    uploadImgFn: function (imgData) {
      let that = this;
      let url = "/upload/uploadImage";
      let data = {
        source: 13,
        img: imgData,
      };
      Indicator.open("上传中...");
      this.axios
        .post(url, JSON.stringify(data))
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            let path = response.image_path;
            that.uploadUrl = response.image_path;
            that.userData.avatar = path;
            console.log(that.userData.avatar);
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    //上传登记表
    uploadIdengji(e) {
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 3) {
        Toast({
          message: "文件大小超过3MB",
          duration: 3000,
        });
        that.$refs.uploadFile.value = "";
      } else {
        if (file != undefined && file != null) {
          let formData = new FormData();
          formData.append("source", "8");
          formData.append("file", file);

          let url = "/upload/uploadFile";
          Indicator.open("上传中...");
          this.axios
            .post(url, formData)
            .then((response) => {
              Indicator.close();
              if (response.code === 0) {
                let path = response.file_path;
                that.uploadUrl = response.file_path;
                that.userData.register_info_image = path;
                that.pdfName = e.target.files[0].name;
              } else {
                Toast({
                  message: response.msg,
                  duration: 3000,
                });
              }
            })
            .catch(function (error) {
              Indicator.close();
              console.log(error);
            });
        }
      }
    },
    // // 上传登记表到服务器
    // uploadImgFndengji: function (imgData) {
    //   let that = this;
    //   let url = "upload/uploadFile";
    //   let data = {
    //     source: 8,
    //     file: imgData,
    //   };
    //   Indicator.open("上传中...");
    //   this.axios
    //     .post(url, JSON.stringify(data))
    //     .then((response) => {
    //       Indicator.close();
    //       if (response.code == 0) {
    //         let path = response.image_path;
    //         that.uploadUrl = response.image_path;
    //         that.userData.register_info_image = path;
    //       } else {
    //         Toast({
    //           message: response.msg,
    //           duration: 3000,
    //         });
    //       }
    //     })
    //     .catch(function (error) {
    //       Indicator.close();
    //       console.log(error);
    //     });
    // },
    // 上传营业执照
    uploadIzhizhao(e) {
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 3) {
        Toast({
          message: "照片大小超过3MB",
          duration: 3000,
        });
        that.$refs.uploadImg.value = "";
      } else {
        if (file != undefined && file != null) {
          let reader = new FileReader();
          reader.onload = (res) => {
            let image = new Image();
            // image.onload = function () {
            //   let width = image.width;
            //   let height = image.height;
            //   let cl = height / width;

            // };
            that.uploadImgFnzhizhao(res.target.result);
            image.src = res.target.result;
          };
          reader.readAsDataURL(file);
        }
      }
    },
    // 上传营业执照到服务器
    uploadImgFnzhizhao: function (imgData) {
      let that = this;
      let url = "/upload/uploadImage";
      let data = {
        source: 15,
        img: imgData,
      };
      Indicator.open("上传中...");
      this.axios
        .post(url, JSON.stringify(data))
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            let path = response.image_path;
            that.uploadUrl = response.image_path;
            that.userData.business_license_image = path;
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    // 上传付费凭证
    uploadIfufei(e) {
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 3) {
        Toast({
          message: "照片大小超过3MB",
          duration: 3000,
        });
        that.$refs.uploadImg.value = "";
      } else {
        if (file != undefined && file != null) {
          let reader = new FileReader();
          reader.onload = (res) => {
            let image = new Image();
            // image.onload = function () {
            //   let width = image.width;
            //   let height = image.height;
            //   let cl = height / width;

            // };
            that.uploadImgFnfufei(res.target.result);
            image.src = res.target.result;
          };
          reader.readAsDataURL(file);
        }
      }
    },
    // 上传付费凭证到服务器
    uploadImgFnfufei: function (imgData) {
      let that = this;
      let url = "/upload/uploadImage";
      let data = {
        source: 16,
        img: imgData,
      };
      Indicator.open("上传中...");
      this.axios
        .post(url, JSON.stringify(data))
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            let path = response.image_path;
            that.uploadUrl = response.image_path;
            that.userData.pay_image = path;
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    // 现有会员缴费
    toOldTeamMemberList() {
      this.$router.push({
        name: "OldTeamMemberList",
      });
    },
    onConfirm(value) {
      this.currentMemberType = value;
      this.userData.member_type = this.getValueByLabel(this.memberType, value);
      console.log("member_type:" + this.userData.member_type);
      this.showPicker = false;
    },
    getValueByLabel(list, label) {
      const item = list.find((item) => item.label === label);
      return item ? item.value : ""; // 未找到时返回null
    },
    getLabelByValue(list, value) {
      const item = list.find((item) => item.value === value);
      return item ? item.label : ""; // 未找到时返回null
    },
    getLabels(list) {
      const labels = list.map((item) => item.label).flat();
      return labels; // 未找到时返回null
    },
  },
};
</script>

<style scoped>
.page_body {
  width: 100vw;
  min-height: 100vh;

  box-sizing: border-box;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.register_from_box {
  width: 6.95rem;
  box-sizing: border-box;
  margin: 0.3rem 0;
  background-color: #ffffff;
  padding: 0.26rem 0.28rem;
  border-radius: 0.12rem;
}
.register_from_items {
  display: flex;
  width: 100%;
  /* height: 1.13rem !important; */
  border-bottom: 0.02rem solid #ebedf2;
}
.register_from_item_inputx {
  outline: none;
  border: none;
  font-size: 0.27rem;
  color: #333333;
  width: 100%;
  height: 0.94rem;
  text-align: right;
}
.register_from_item {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.from_item_title {
  color: #999999;
}

.border_item_title_tips {
  font-size: 0.32rem;
  margin-right: 0.08rem;
}
.sd {
  color: #333333;
  font-size: 0.23rem;
  display: flex;
  align-items: center;
}
.sds {
  color: rgb(16, 91, 229);
}
.border_item {
  width: 100%;
  /* height: 1.4rem; */
  padding-bottom: 0.1rem;
  border-bottom: 0.02rem solid #ebedf2;
}
.border_item_title {
  width: 100%;
  color: #333333;
  font-size: 0.3rem;
  display: flex;
  align-items: center;
}
.border_item_popup_box {
  width: 100%;
  height: 0.94rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.coach_register_from_upload_img {
  width: 4.8rem;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.border_item_popup {
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.28rem;
  width: 6rem;
}

.no_value_item {
  color: #999999;
}
.upload_img_box_icon {
  width: 100%;
  height: 100%;
  display: block;
}

input:disabled {
  background-color: #fff;
  opacity: 1;
  -webkit-opacity: 1;
}

.top_tips {
  font-size: 0.24rem;
  color: #016ffd;
  margin-bottom: 0.2rem;
  text-align: center;
}
.popup_icon {
  width: 0.1rem;
  display: block;
}
.upload_img_box_icon {
  width: 100%;
  height: 100%;
  display: block;
}
.upload_img_box {
  width: 0.9rem;
  height: 1.22rem;
  overflow: hidden;
  position: relative;
}
#upload_img_btn {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
#upload_pdf_btn {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.van-radio {
  margin-top: 0.2rem;
}
.sign_botton {
  background-color: rgba(0, 113, 255, 1);
  border-radius: 10px;
  color: #ffffff;
  width: 80%;
  height: 0.95rem;
  opacity: 1;
  border-radius: 10px;
  text-align: center;
  line-height: 0.95rem;
  margin: 0.6rem auto 0;
}
.sign_bottonsd {
  background-color: #fff;
  border-radius: 10px;
  color: #e16f6f;
  border: 1px solid #e16f6f;
  width: 80%;
  height: 0.95rem;
  opacity: 1;
  border-radius: 10px;
  text-align: center;
  line-height: 0.95rem;
  margin: 0.6rem auto 0;
}
.member_constitution_btn_b {
  width: 80%;
  margin: 0 auto;
  height: 0.8rem;
  line-height: 0.8rem;
  box-sizing: border-box;
  background-color: #016ffd;
  color: #fff;
  text-align: center;
  border-radius: 0.4rem;
}
.psdsf {
  /** 文本2 */
  color: #016ffd;
  font-size: 0.3rem;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 0.9rem;

  text-align: center;
  vertical-align: top;
  padding: 0.1rem;
}
.psd {
  padding: 0.3rem;
  font-size: 0.28rem;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 0.8rem;
  color: rgba(0, 0, 0, 1);
  text-align: left;
  vertical-align: top;
}
.pios {
  padding: 0.2rem;
  width: 90%;
  background-color: #fff;
  color: rgba(0, 0, 0, 1);
  margin-top: 0.3rem;
}
.sisd {
  width: 6rem;
}
</style>
